<template>
  <div class="top-navigation">
    <!-- nav变化过渡  navbar 相当于菜单栏  navbar-expand-lg手机、电脑电脑端页面变化适应  fixed-top顶  navbar-light浅色背景         -->
    <nav class="nav navbar navbar-expand-lg fixed-top navbar-light" :class="{ 'affix': isAffixed }">
      <div style="width: 100%" class="container">
        <a href="/home"><img class="headerImage" :src="blueLogo"></a>
        <a class="navbar-brand" href="/home"><img class="nameImage" :src="blueName"></a>
<!--        手机状态下的头像-->
        <ul class="phonePhoto" style="float: right">
          <li class="nav-item dropdown">
            <a class="" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              <el-avatar :src="imageUrl" :size="40" class="pointer" src="circleUrl"/>
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" style="display: flex; flex-direction: column; justify-content: center; align-items: center;" href="/resetPwd">修改密码</a></li>
              <li><a class="dropdown-item" style="display: flex; flex-direction: column; justify-content: center; align-items: center;" href="/UploadMessage">更新个人信息</a></li>
              <li><a class="dropdown-item" style="display: flex; flex-direction: column; justify-content: center; align-items: center;" href="#" @click="detailedInformation1()">查看个人信息</a></li>
              <li><a class="dropdown-item" style="display: flex; flex-direction: column; justify-content: center; align-items: center;" href="#" @click="uploadPhotoDialog=true">上传个人照片</a></li>
              <li><a style="display: flex; flex-direction: column; justify-content: center; align-items: center;"
                     class="dropdown-item" href="/myUnit">部门维护</a></li>
              <li><a style="display: flex; flex-direction: column; justify-content: center; align-items: center;"
                     class="dropdown-item" href="/updateAward">上传奖项竞赛</a></li>
              <li><a class="dropdown-item" href="/awardMessage" style="display: flex; flex-direction: column; justify-content: center; align-items: center;">奖惩信息查询</a></li>
              <li><a class="dropdown-item" href="#"
                     style="display: flex; flex-direction: column; justify-content: center; align-items: center;"
                     @click="switchAccount()">退出登录</a></li>
            </ul>
          </li>
        </ul>
        <!--           缩小后右侧按钮-->
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item dropdown"
                v-if="readMessage(this.roleNo)||readAllAwardMessage(this.roleNo)||construct(this.roleNo)">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                查询
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown"  >
                <li v-if="readMessage(this.roleNo)"><a class="dropdown-item" href="/message" style="display: flex; flex-direction: column; justify-content: center; align-items: center;" >学生信息查询</a></li>
                <li v-if="readAllAwardMessage(this.roleNo)"><a class="dropdown-item" href="/allAwardMessage" style="display: flex; flex-direction: column; justify-content: center; align-items: center;">全部奖惩信息查询</a></li>
                <li v-if="construct(this.roleNo)"><a class="dropdown-item" href="/construction" style="display: flex; flex-direction: column; justify-content: center; align-items: center;">党团建设信息查询</a></li>
                <li v-if="ProjectMessage(this.roleNo)"><a class="dropdown-item" href="/ProjectMessage" style="display: flex; flex-direction: column; justify-content: center; align-items: center;">项目信息查询</a></li>
                <li v-if="FieldworkMessage(this.roleNo)"><a class="dropdown-item" href="/FieldworkMessage" style="display: flex; flex-direction: column; justify-content: center; align-items: center;">实习经历查询</a></li>
              </ul>
            </li>
            <li class="nav-item dropdown" v-if="(readInstructor(this.roleNo) || readUnit(this.roleNo))||readUnitHuman(this.roleNo)">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                部门
              </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdown"  >
<!--                <li v-if="readInstructor(this.roleNo)"><a  class="dropdown-item" href="/instructor" style="display: flex; flex-direction: column; justify-content: center; align-items: center;">教师信息</a></li>-->
                  <li v-if="readUnit(this.roleNo)"><a class="dropdown-item" href="/Unit" style="display: flex; flex-direction: column; justify-content: center; align-items: center;">部门信息</a></li>
                  <li v-if="readUnitHuman(this.roleNo)"><a class="dropdown-item" href="/unitHuman" style="display: flex; flex-direction: column; justify-content: center; align-items: center;">部门管理</a></li>
                </ul>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                照片
              </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdown"  >
                <li><a class="dropdown-item" target="_blank" href="/photo" style="display: flex; flex-direction: column; justify-content: center; align-items: center;">照片查看</a></li>
                <li v-if="photoManage(this.roleNo)"><a class="dropdown-item" href="/photoManage" style="display: flex; flex-direction: column; justify-content: center; align-items: center;">照片管理</a></li>
              </ul>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                活动
              </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <li><a v-if="activity(this.roleNo)" class="dropdown-item" href="/activity"
                         style="display: flex; flex-direction: column; justify-content: center; align-items: center;">活动管理</a>
                  </li>
                <li><a class="dropdown-item" href="/activityHistory" style="display: flex; flex-direction: column; justify-content: center; align-items: center;">历史活动</a></li>
                  <!--                <li v-if="!activity(this.roleNo)"><a class="dropdown-item" href="#" style="display: flex; flex-direction: column; justify-content: center; align-items: center;">我的报名的活动</a></li>-->
              </ul>
            </li>
<!--            <li class="nav-item dropdown">-->
<!--              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">-->
<!--                综测-->
<!--              </a>-->
<!--              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">-->
<!--                <li><a class="dropdown-item" style="display: flex; flex-direction: column; justify-content: center; align-items: center;" href="/UploadComplex">上传综测</a></li>-->
<!--              </ul>-->
<!--            </li>-->
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
                 aria-expanded="false">
                新闻
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                <li v-if="newsEdit(this.roleNo)"><a class="dropdown-item" href="/newsEdit"
                       style="display: flex; flex-direction: column; justify-content: center; align-items: center;">新增新闻</a>
                </li>
                <li><a class="dropdown-item" href="/newsHistory"
                       style="display: flex; flex-direction: column; justify-content: center; align-items: center;">历史新闻</a>
                </li>
              </ul>
            </li>
            <li v-if="noticesEdit(this.roleNo)" class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
                   aria-expanded="false">
                    通知
                </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <li><a class="dropdown-item" href="/noticesEdit"
                                                        style="display: flex; flex-direction: column; justify-content: center; align-items: center;">新增通知</a>
                    </li>
                    <li><a class="dropdown-item" href="/notice_manage"
                           style="display: flex; flex-direction: column; justify-content: center; align-items: center;">通知管理</a>
                    </li>
                </ul>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
                 aria-expanded="false">
                综测
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                <li><a class="dropdown-item" href="/UploadComplex"
                       style="display: flex; flex-direction: column; justify-content: center; align-items: center;">综测上传</a>
                </li>
                <li v-if="complexApproval(this.roleNo)"><a class="dropdown-item" href="/ComplexApproval"
                       style="display: flex; flex-direction: column; justify-content: center; align-items: center;">综测审批</a>
                </li>

                <li v-if="complexView(this.roleNo)"><a class="dropdown-item" href="/Complex"
                       style="display: flex; flex-direction: column; justify-content: center; align-items: center;">个人综测查看</a>
                </li>
                <li v-if="complexApproval(this.roleNo)"><a class="dropdown-item" href="/GetAllComplex"
                       style="display: flex; flex-direction: column; justify-content: center; align-items: center;">综测成绩查看</a>
                </li>
              </ul>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
                 aria-expanded="false">
                反馈
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                <li><a class="dropdown-item" href="#" @click="this.$store.commit('bugDialogShow')"
                       style="display: flex; flex-direction: column; justify-content: center; align-items: center;">Bug反馈</a>
                </li>
                <li v-if="feedbackHandle(this.roleNo)"><a class="dropdown-item" href="/feedBackHandle"
                       style="display: flex; flex-direction: column; justify-content: center; align-items: center;">意见处理</a>
                </li>
                <li v-if="!feedbackHandle(this.roleNo)"><a class="dropdown-item" href="#"
                                                           @click="this.$store.commit('oneTeacherDialogShow')"
                       style="display: flex; flex-direction: column; justify-content: center; align-items: center;">教师意见反馈</a>
                </li>
                <li><a class="dropdown-item" href="/myFeedBack"
                       style="display: flex; flex-direction: column; justify-content: center; align-items: center;">我的意见</a>
                </li>
              </ul>
            </li>
            <li class="nav-item dropdown-item">
                <a v-if="event_manage(this.roleNo)" class="nav-link" href="/eventmanage">大事</a>
            </li>
            <li class="nav-item dropdown-item">
              <a v-if="log(this.roleNo)" class="nav-link" href="/log">日志</a>
            </li>
            <li class="nav-item dropdown-item">
              <a class="nav-link" href="/Contributors">关于</a>
            </li>
          </ul>
        </div>
<!--        pc状态下的头像-->
        <ul class="pcPhoto" style="float: right">
          <li class="nav-item dropdown">
            <a class="" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              <el-avatar :src="imageUrl" :size="60" class="pointer" src="circleUrl"/>
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" style="display: flex; flex-direction: column; justify-content: center; align-items: center;" href="/resetPwd">修改密码</a></li>
              <li><a class="dropdown-item" style="display: flex; flex-direction: column; justify-content: center; align-items: center;" href="/UploadMessage">更新个人信息</a></li>
              <li><a class="dropdown-item" style="display: flex; flex-direction: column; justify-content: center; align-items: center;" href="#" @click="detailedInformation1()">查看个人信息</a></li>
              <li><a class="dropdown-item" style="display: flex; flex-direction: column; justify-content: center; align-items: center;" href="#" @click="uploadPhotoDialog=true">上传个人照片</a></li>
              <li><a style="display: flex; flex-direction: column; justify-content: center; align-items: center;"
                     class="dropdown-item" href="/myUnit">部门维护</a></li>
              <li><a style="display: flex; flex-direction: column; justify-content: center; align-items: center;" class="dropdown-item" href="/updateAward">上传奖项竞赛</a></li>
              <li><a style="display: flex; flex-direction: column; justify-content: center; align-items: center;" class="dropdown-item" href="/updateInternship">上传实习经历</a></li>
              <li><a style="display: flex; flex-direction: column; justify-content: center; align-items: center;" class="dropdown-item" href="/updateProject">上传项目经历</a></li>
              <li><a class="dropdown-item" href="/awardMessage" style="display: flex; flex-direction: column; justify-content: center; align-items: center;">奖惩信息查询</a></li>
              <li><a class="dropdown-item" href="#"
                     style="display: flex; flex-direction: column; justify-content: center; align-items: center;"
                     @click="switchAccount()">退出登录</a></li>
            </ul>
          </li>
        </ul>

      </div>
    </nav>
  </div>
  <el-dialog
      title="上传个人照片"
      v-model="uploadPhotoDialog"
      :width="300"
      center>
    <div style="display: flex;
              justify-content: center;
              align-items: center;">
      <el-upload
          accept=".jpeg,.png,.jpg"
          :before-upload="checkFileType"
          class="avatar-uploader"
          :width="140"
          style="  border: 1px dashed #d9d9d9;
                    border-radius: 6px;
                    cursor: pointer;
                    position: relative;
                    overflow: hidden;"
          :action="serverIp() + '/api/info_account/uploadPhoto'"
          :headers="this.headerObject"
          :show-file-list="false"
          :on-success="handleAvatarSuccess">
        <div style="width: 140px;height:195px">
          <img width="140" height="195" v-if="imageUrl!==photoIp()+'null'" :src="imageUrl" class="avatar">
        </div>
      </el-upload>
    </div>
    <div>
      请先下载照片处理工具进行处理再上传<br/>
      <a href="https://gxb-system.oss-cn-beijing.aliyuncs.com/%E7%85%A7%E7%89%87%E9%AA%8C%E8%AF%81.zip" download>点击下载</a>
    </div>
  </el-dialog>

  <el-dialog
      v-model="detailedInformation"
      :close-on-click-modal="false"
      title="学生详细信息"
      width="850px">
    <information v-if="detailedInformation" ref="dialog"/>
  </el-dialog>

  <!--  反馈模块-->
  <!--  Bug反馈-->
  <bugRelated v-model="this.$store.state.bugDialog"/>
  <!--  意见反馈-->
  <oneTeacherRelated v-if="!feedbackHandle(this.roleNo)" v-model="this.$store.state.oneTeacherFeedBackDialog"/>
</template>

<script>
import {
  activity,
  complexApproval, complexView,
  construct, event_manage, feedbackHandle, FieldworkMessage,
  leaveApply,
  leaveApproval,
  log, newsEdit, noticesEdit,
  opinionApply,
  opinionView,
  photoManage, ProjectMessage, readAllAwardMessage,
  readAwardMessage,
  readInstructor,
  readMessage,
  readUnit,
  readUnitHuman,
  readUpdateAward
} from "@/util/permissionJudgment.js";
import blackLogo from "@/assets/image/logo.png"
import blueLogo from "@/assets/image/blueLogo.png"
import blackName from "@/assets/image/信息工程學院學生信息管理系統黑.png"
import blueName from "@/assets/image/信息工程學院學生綜合管理系統_蓝.png"
import {photoIp, serverIp} from "../../../public/static/config.js";
import aes from "@/util/aes.js";
import Information from "@/template/Information.vue";
import request from "@/util/request.js";
import {ElMessage} from "element-plus";
import BugRelated from "@/views/feedBack/BugRelated.vue";
import OneTeacherRelated from "@/views/feedBack/OneTeacherRelated.vue";
export default {
  name: "Head",
  components: {OneTeacherRelated, BugRelated, Information},
  data() {
    return {
      detailedInformation: false,// 个人信息弹窗
      imageUrl:JSON.parse(localStorage.getItem('user')).photoImage,
      headerObject:{
        "account" : JSON.parse(localStorage.getItem('user')).accountNo,
        "token" : JSON.parse(localStorage.getItem('user')).token
      },
      currentTime: "",
      roleNo: [],
      ChangePassword: false,
      isAffixed: false,
      popover: false,
      blackLogo:blackLogo, // 头部照片
      blueLogo: blueLogo,
      blackName:blackName, //头部文字
      blueName:blueName, //头部文字
      uploadPhotoDialog: false, //上传头像弹窗
    }
  },
  created() {
    this.setRoleNo()
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  }, beforeUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    complexView,
    photoIp() {
      return photoIp
    },
    feedbackHandle,
    construct,
    ProjectMessage,
    FieldworkMessage,
    noticesEdit,
    newsEdit,
    readAllAwardMessage,
    serverIp() {
      return serverIp
    },
      event_manage,
    activity,
    photoManage,
    complexApproval,
    opinionView,
    opinionApply,
    leaveApproval,
    leaveApply,
    readUnit,
    readUnitHuman,
    readInstructor,
    readUpdateAward,
    readAwardMessage,
    readMessage,
    log,
    open(url) {
      window.open(url)
    },
    // 用户角色赋值
    setRoleNo() {
      if (JSON.parse(localStorage.getItem("user")).roleNo.includes(",")) {
        this.roleNo = JSON.parse(localStorage.getItem("user"))["roleNo"].split(',')
      } else {
        this.roleNo.push(JSON.parse(localStorage.getItem("user"))["roleNo"])
      }
    },

    // 检查文件类型
    checkFileType(file) {
      const fileName = file.name
      const fileType = fileName.substring(fileName.lastIndexOf('.'))
      // jpeg,.png,.jpg,.bmp,.gif
      if (
          fileType === '.jpg' ||
          fileType === '.png' ||
          fileType === '.jpeg'
      ) {
        // 不处理
      } else {
        this.$message.error(
            '不是,jpeg,.png,.jpg文件,请上传正确的图片类型'
        )
        return false
      }
      if (!fileName.includes("报名照片")) {
        this.$message.error(
            '请先处理后再上传'
        )
        return false
      }
    },
    detailedInformation1() {
      request.get("/info_account/getByAccountNo?accountNo="+JSON.parse(localStorage.getItem('user')).accountNo).then(res=>{
        this.information=res.data.data
        this.detailedInformation = true
        window.getTemplateData = (callback) => {
          this.getTemplateData(callback);
        }
      })
    },
    getTemplateData(callback) {
      callback(this.information);
    }, //获取文书数据
    handleScroll() {
      this.isAffixed = window.pageYOffset > 50;
    },
    // 头像上传成功回调
    handleAvatarSuccess(res){
      res = aes.decrypt(res)
      if (res.code === "400") {
        ElMessage({
          type: 'warning',
          message: '请先处理再上传!，处理完成后不要改名'
        });
        return;
      }
      this.imageUrl=res.data
    //   更新localStorage中的个人照片信息
     let user = JSON.parse(localStorage.getItem('user'))
      user.photoImage=this.imageUrl
      localStorage.setItem("user", JSON.stringify(user));
    },
      switchAccount() {
          // 执行切换账号的操作，例如清除当前用户信息并重定向到登录页面
          localStorage.clear()
          this.$router.push('/login'); // 假设使用 Vue Router，并且登录页面的路径为 '/login'

          // 可以根据需要执行其他操作，例如清除 Vuex 中的用户状态等
      }
  },
}
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css?family=Quicksand:400,500,700');

a {
  font-weight: bold;
}

html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Quicksand", sans-serif;
  font-size: 62.5%;
  font-size: 10px;
}

/*-- Inspiration taken from abdo steif -->
/* --> https://codepen.io/abdosteif/pen/bRoyMb?editors=1100*/

.nav {
  width: 100%;
  position: fixed;
  line-height: 30px;
  text-align: center;
  /* 动画 */
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  font-size: 20px;
  font-family: "等线", sans-serif;
  font-weight: bold;
}
.nameImage{
  height: 30px;
  margin-left: 15px;
}
/* 头部照片 */
.headerImage{
  height: 60px;
}
@media screen and (min-width: 1200px) {
  .container {
    min-width: 1200px;
  }
  .phonePhoto{
    display: none;
  }


  /*下拉框优化使用*/
  .dropdown-menu {
    display: none; /* 初始状态隐藏下拉框 */
  }

  .dropdown:hover .dropdown-menu {
    display: flex; /* 鼠标悬停时显示下拉框 */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*下拉列表左移一点*/
    margin-left: -45px;
  }
}
/*992与1200为bootstrap的一个断点   根据他来设置会有一定效果*/
@media (min-width: 992px) and (max-width: 1200px){
  .phonePhoto{
    display: none;
  }
  .headerImage{
    display: none;
  }
  /* 头部照片 */
  .headerImage{
    height: 60px;
    margin-left: 0;
  }
  .dropdown-menu {
    /*下拉列表左移一点*/
    margin-left: -45px;
  }
  /* 下拉菜单按钮*/
  .nav div.media_button {
    display: block;
  }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
  .pcPhoto{
    display: none;
  }
  /* 头部照片 */
  .headerImage{
    height: 60px;
    margin-left: 0;
  }
  .container {
    margin: 0;
  }
  /* 小屏头部占满 */
  .container-sm, .container {
    max-width: 100%;
  }
  /* 下拉框沾满*/
  .container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
    --bs-gutter-x: 0rem;
  }

  /* 下拉菜单ul*/
  .nav div.main_list ul {
    flex-direction: column;
    width: 100%;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #111;
    /*same background color of navbar*/
    background-position: center top;
  }
  /* 下拉菜单li*/
  .nav div.main_list ul li {
    width: 100%;
    text-align: right;
  }
  /* 下拉菜单白色 */
  #navbarSupportedContent{
    background-color: white;
  }
  /* 下拉菜单li->a*/
  .nav div.main_list ul li a {
    text-align: center;
    width: 100%;
    font-size: 3rem;
    padding: 20px;
  }
  /* 下拉菜单按钮*/
  .nav div.media_button {
    display: block;
  }
}

@media screen and (max-width: 768px) {
  .pcPhoto{
    display: none;
  }
  /* 头部照片 */
  .headerImage{
    height: 60px;
    margin-left: 0;
  }
  .nameImage{
    display: none;
  }
  .container {
    margin: 0;
  }
  /* 小屏头部占满 */
  .container-sm, .container {
    max-width: 100%;
  }
  /* 下拉框沾满*/
  .container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
    --bs-gutter-x: 0rem;
  }
  /* 下拉菜单白色 */
  #navbarSupportedContent{
    background-color: white;
  }

  /* 下拉菜单ul*/
  .nav div.main_list ul {
    flex-direction: column;
    width: 100%;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #111;
    /*same background color of navbar*/
    background-position: center top;
  }
  /* 下拉菜单li*/
  .nav div.main_list ul li {
    width: 100%;
    text-align: right;
  }
  /* 下拉菜单li->a*/
  .nav div.main_list ul li a {
    text-align: center;
    width: 100%;
    font-size: 3rem;
    padding: 20px;
  }
  /* 下拉菜单按钮*/
  .nav div.media_button {
    display: block;
  }
}

.affix {
  padding: 0;
  background-color: #ffffff;
}
/* 头像上传*/
.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  width: 140px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
  width: 140px;
  justify-content: center;
}
.avatar {
  width: 140px;
  height: 195px;
  display: block;
}
</style>
